<template>
  <view class="mxp-load-more" :style="[{ backgroundColor: background, margin }, cusStyle]" :class="[cusClass]">
    <mxp-line v-if="showLine" :length="lineLength" :color="lineColor" :dashed="dashed"></mxp-line>
    <view class="load-more-content">
      <template v-if="state === 'loading' && showIcon">
        <mxp-icon :color="iconColor" :size="iconSize" :spin="true" name="jiazai" :cusStyle="{ marginRight: '8px' }"></mxp-icon>
      </template>
      <text :style="[textStyle]" @tap="loadMore">
        {{ showText }}
      </text>
    </view>
    <mxp-line v-if="showLine" key="mxp-line-2" :length="lineLength" :color="lineColor" :dashed="dashed"></mxp-line>
  </view>
</template>

<script lang="ts" setup>
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import MxpIcon from '../mxp-icon/mxp-icon.vue';
  import MxpLine from '../mxp-line/mxp-line.vue';
  import { type CSSProperties, type PropType, computed, nextTick, ref, watch } from 'vue';
  import type { $AllColorStr, $SizeUnitArr4Str, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';

  export type LoadMoreState = 'beforeLoad' | 'loading' | 'nomore';

  defineOptions({
    name: 'mxp-load-more',
  });

  const props = defineProps({
    /** 组件状态，beforeLoad-加载前的状态，loading-加载中的状态，nomore-没有更多的状态  */
    modelValue: { type: String as PropType<LoadMoreState>, default: 'loadmore' },
    /** 背景颜色 */
    background: { type: String, default: 'transparent' },
    /** 线条长度 */
    lineLength: { type: String as PropType<$SizeUnitStr>, default: '68px' },
    /** 是否显示加载中的图标 */
    showIcon: { type: Boolean, default: true },
    /** 图标大小 */
    iconSize: { type: String as PropType<$SizeUnitStr>, default: '16px' },
    /** 图标颜色 */
    iconColor: { type: String as PropType<$AllColorStr>, default: '#606266' },
    /** 字体颜色 */
    textColor: { type: String as PropType<$AllColorStr>, default: '#606266' },
    /** 字体大小 */
    textSize: { type: String as PropType<$SizeUnitStr>, default: '14px' },
    /** 加载前的提示语 */
    beforeLoadText: { type: String, default: '点击加载更多' },
    /** 加载中提示语 */
    loadingText: { type: String, default: '正在加载中' },
    /** 没有更多的提示语 */
    nomoreText: { type: String, default: '没有更多了' },
    /** 边距 */
    margin: { type: String as PropType<$SizeUnitArr4Str>, default: '0px' },
    /** 是否显示两边的分割线 */
    line: { type: Boolean, default: true },
    /** 加载中时是否显示线条 (需要 line设置为 true) */
    loadingLine: { type: Boolean, default: false },
    /** 线条颜色 */
    lineColor: { type: String as PropType<$AllColorStr>, default: '#E6E8EB' },
    /** 是否虚线，true-虚线，false-实线 */
    dashed: { type: Boolean, default: false },
    ...publicStyeProps,
  });
  const emits = defineEmits<{
    (e: 'update:modelValue', state: LoadMoreState): void;
    (e: 'loadmore'): void;
    (e: 'change', state: LoadMoreState): void;
  }>();

  const state = ref<LoadMoreState>(props.modelValue);
  watch(
    () => props.modelValue,
    (_state) => {
      state.value = _state;
    }
  );
  watch(
    () => state.value,
    (_state) => {
      emits('update:modelValue', _state);
      nextTick(() => {
        emits('change', _state);
      });
    }
  );

  /** 文本样式  */
  const textStyle = computed<CSSProperties>(() => {
    return { color: props.textColor, fontSize: props.textSize, lineHeight: props.textSize, backgroundColor: props.background };
  });

  /** 显示的提示文字 */
  const showText = computed(() => {
    let text = '';
    if (state.value === 'beforeLoad') {
      text = props.beforeLoadText;
    } else if (state.value === 'loading') {
      text = props.loadingText;
    } else {
      text = props.nomoreText;
    }
    return text;
  });

  /** 显示线条 */
  const showLine = computed(() => {
    if (state.value === 'loading') {
      return props.loadingLine && props.line;
    } else {
      return props.line;
    }
  });

  /**
   * 点击加载更多
   */
  function loadMore() {
    if (state.value === 'beforeLoad') {
      state.value = 'loading';
      emits('loadmore');
    }
  }

  defineExpose({
    /** 手动设置状态 */
    setState(_state: LoadMoreState) {
      state.value = _state;
    },
  });
</script>

<style lang="scss" scoped>
  .mxp-load-more {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    padding-top: 20rpx;

    .load-more-content {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
    }
  }
</style>
